<template>
  <div>
    <el-card class="fillter-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <!-- 数据筛选表单 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="状态">
            <el-radio-group v-model="status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="channelId" placeholder="请选择活动频道">
              <el-option 
              label="全部" :value="null"
              ></el-option>
              <el-option 
              :label="item.name" :value="item.id"
              v-for= "(item,index) in channels" :key="index"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-date-picker v-model="rangeDate" type="datetimerange" 
            start-placeholder="开始日期"  end-placeholder="结束日期" format="yyyy-MM-DD" value-format="yyyy-MM-DD">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :disabled="loading" @click="loadArticle(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        根据筛选条件共查询到{{totalCount}}条结果
      </div>
      <div>
        <!-- 数据列表 -->
        <el-table v-loading="loading" :data="articles" style="width: 100%" stripe>
          <el-table-column prop="date" label="封面" >
            <template slot-scope="scope">
              <img 
              class="article-cover"
              v-if="scope.row.cover.images[0]"
              :src="scope.row.cover.images[0]" alt="">
              <img class="article-cover" v-else src="./no-cover.gif" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" >
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0">草稿</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status === 1">待审核</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 2">审核通过</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status === 3">审核失败</el-tag>
              <el-tag type="info" v-else-if="scope.row.status === 4">已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pubdate" label="发布时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" circle
               ></el-button>
              <el-button type="danger" icon="el-icon-delete" circle
              @click="onDeleteArticle(scope.row)"></el-button>
            </template>
    </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" 
        :total="totalCount"
         @current-change="onCurrentChange"
         :disabled="loading"
         :page-size="pageSize"
         :current-page.sync="page">
        </el-pagination>
      </div>
    </el-card>



  </div>
</template>
<script>
  import {getArticles,getArticleChannels,deleteArticle} from '@/api/article'
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        articles:[],
        totalCount:0, //总数据条数
        pageSize:20, //每页大小
        status:null,//不传就是全部
        channels:[], //文章频道列表
        channelId:null, //查询频道
        rangeDate:[],   //筛选日期
        loading:true,  //加载中 
        page:1
      }
    },
    created(){
      this.loadChannels()
      this.loadArticle(1)
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      async loadArticle(page=1){
        this.loading =true
        const res = await getArticles({
          page:page,
          per_page:this.pageSize,
          status:this.status,
          channel_id: this.channelId,
          begin_pubdate:this.rangeDate ? this.rangeDate[0] : null,
          begin_pubdate:this.rangeDate ? this.rangeDate[0] : null,
        })
        this.articles= res.data.data.results
        this.totalCount =res.data.data.total_count
        this.loading =false
      },
      onCurrentChange(page){
        this.loadArticle(page)
      },
      async loadChannels(){
        let res= await getArticleChannels()
        this.channels = res.data.data.channels
        this.loading=false
      },
      onDeleteArticle(id){
         this.$confirm('是否删除?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
                  deleteArticle(articleId.toString()).then(res =>{
                    //删除成功跟新
                  this.loadArticles(this.page)
                })
            }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消'
               });          
            });

      }
    }
  }
</script>
<style scoped>
  .fillter-card {
    margin-bottom: 30px;
  }
  .article-cover{
    width:60px;
    background-size: cover;
  }
</style>